<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="search">
				<el-form-item>
					<el-input v-model="search.key" placeholder="权限名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="queryData">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="pageInfo.data"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" label="" width="60">
			</el-table-column>
			<el-table-column prop="name" label="权限名称" width="100" sortable>
			</el-table-column>
      <el-table-column prop="url" label="权限路径" width="150" sortable>
      </el-table-column>
      <el-table-column prop="descs" label="权限描述" width="150" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="权限唯一标识" width="180" sortable>
      </el-table-column>
		</el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </el-col>
	</section>
</template>

<script>

	export default {
		data() {
			return {
				search: {
					key: '',
          pageSize:5,
          currentPage:1
				},
        pageInfo:{
          data: [],
          total: 0
        },
				listLoading: false,
				sels: [],//列表选中列
			}
		},
		methods: {
      //获取权限列表
      getPermissions(){
        this.$http.post("/permission",this.search)
            .then(res=>{
              res = res.data;
              if(res.success){
                this.pageInfo = res.data;
                this.listLoading = false;
              }
            })
            .catch(res=>{})
      },
      //当每页条数发生变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.search.pageSize = val;
        this.getPermissions();
      },
      //当前页发生变化
			handleCurrentChange(val) {
				this.search.currentPage = val;
				this.getPermissions();
			},
      //点击查询
      queryData() {
        this.search.currentPage = 1;
        this.getPermissions();
      }
		},
		mounted() {
			this.getPermissions();
		}
	}

</script>

<style scoped>

</style>